<template>
  <div class="icons" >
    <swiper ref="mySwiper">
      <swiper-slide  v-for="(page,index) in pageArr" :key="index" >
        <div class="icon" v-for="value in page" :key="value.id">
          <img :src="value.imgUrl" />
          <span>{{value.desc}}</span>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>
<script>
export default {
  name: "HomeIcons",
  props:{
   iconList:{
       type:Array,
       default:[]
   }
  },
  data() {
      return {
        
          }
  },
  computed: {
    //   分页计算
      pageArr(){
          let pages = []
          // console.log(this.iconList )
            this.iconList.forEach((icon,index)=>{
            //   通过index计算满足条件页码数
              let pageNumber =Math.floor(index / 8) 
              if(!pages[pageNumber]){
                pages[pageNumber] = []
              }
              pages[pageNumber].push(icon)
          })
          // console.log(pages)
          return pages
        
      }
  },
};
</script>
<style lang='stylus' scoped>
@import '~stylus/mixin.styl';

.icons {
  width: 100%;
  background-color: #FEFEFE;

  .icon {
    position: relative;
    float: left;
    width: 25%;
    height: 0;
    padding-bottom: 25%;
    // background-color: yellow;
    overflow: hidden;

    img {
      position: absolute;
      left: 50%;
      transform: translate(-50%, 20px);
      height: 35px;
      width: 35px;
    }

    span {
      position: absolute;
      font-size: 12px;
      white-space: nowrap;
      display: block;
      text-align: center;
      top: 65%;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
</style>